import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import PageTool from '@/components/index'// 全局注册,头部导航
import UploadExcel from '@/components/index.js'// 上传Excel表格,转化

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

Vue.use(PageTool)// 避免main.js文件过大,不好做后期维护,将Vue.component单独用install调用,注册在全局组件的index中
Vue.use(UploadExcel)// 全局注册

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// 13. v-model是Vue的指令(语法糖)
// <标签 v-model="vue变量"></标签>
// 作用: 实现数据双向绑定
// 双向: 当前标签的value属性和vue变量双向绑定到一起
// v-model运行时, 会给当前标签添加 :value="vue变量", 还会给当前标签绑定@input事件, 把事件的值赋予给vue变量
// 本质: <标签 :value="vue变量" @input="(值) => vue变量 = 值">
// 问题: 我除了在表单标签上用v-model, 自定义的组件身上是否可以使用v-model?
// 可以...但是需要组件内定义props: 必须叫value, 内部检测输入框改变, 必须触发$emit('input', 值)
// 例子: 微信群里

// 为何props的变量, vue不建议我们修改
// 子组件自己修改此变量的值, 不会影响到父级
// 父级刷新此变量的值就会丢失, 变成父级传入的值
// 所以props一般是只读的(引用类型除外)
// 遵守: 单向数据流, 子里要改变父传来的props值, 要$emit技术
// 传递给父亲, 让父亲改变数据, 再重新单向流入到子组件内

// 改变props方式2种:
// 方式1: 转存到data变量上(你改变的时候只是改变组件内data, 父级数据没有受到影响)->偶尔用
// 方式2: 子传父技术, 父级把这个变量的值改变后再流会到props变量上 -> 常用

// .sync作用: 优化子传父的过程(父组件内不必再实现赋值过程, 但是如果父组件里需要复杂的操作, 那就还用原来的写法)
// 父传子
// (1): 子组件props: { num: Number }
// (2): 父组件 <子组件 num="myNum"></子组件>
// 以前子传父
// (1): 子组件内: this.$emit('自定义事件名', 100)
// (2): 父组件内: <子组件 @自定义事件名="事件处理函数"></子组件>
// 事件处理函数中, 给myNum = 100 -> myNum会流回到子组件props的num变量上
// 用了.sync修改上面的代码
// 父传子
// (1): 子组件props: { num: Number }
// (2): 父组件 <子组件 num="myNum"></子组件>
// 以前子传父(简化写法)
// (1): 子组件内: this.$emit('update:num', 100) 格式update:props变量名
// (2): 父组件内: <子组件 num.sync="myNum"></子组件>
// .sync相当于是一个语法糖 @update:num="值 => myNum = 值"

/*
16.vue 组件的运用
其实组件是.vue文件,没有区别,划分的区别是为了方便写代码
组件分为2类
(1):  页面组件: 都是和路由配合使用/作为页面的某一部分(逻辑业务.数据处理/网络请求调用)
(2):  复用组件: 当前页面多次使用/别的页面也要使用它(只负责展示数据,所有的逻辑和网络请求传回到页面组件里编写)
->如有数据关系还要遵守单项数据流
*/

/*
router切换特点:
路由的页面切换是指异步切换或者局部切换,前一个页面会被销毁,不会使代码重新执行(重绘或重排),但刷新会导致这种情况
*/

/*
22.404问题
"链接"指向的"资源"不存在
链接:html文件地址/css文件地址/图片文件地址/路由地址/ajax请求接口地址/前端文件路径
//路由路径指向的地址根本不存在,就404
//图片那一串地址指向位置资源不存在,就404
*/

/*
23.前端如何做预览效果?
前端网页选择了一个图片要上传,但是上传之前想要在前端先显示一下我们的图片
URL.creatObjectURL(文件对象) -> blob二进制地址(前端浏览器内的一个图片地址)
一般给img的src设置做"纯前端图片预览的效果"
*/

/*
24.第三方SDK?
一些有名的/别的公司出的服务
例如:微信支付/百度地图/环信聊天/QQ登录等
我们可以在自己的项目中集成他们的服务功能(有免费的/也有花钱的)
步骤1: 去对应官网创建账号申请(密钥/id)->表明你的身份(类似token)
步骤2: 看对应文档,下载他们的js插件/sdk->npm下包(他们写好的代码和方法),在我们自己的项目中调用即可
*/
